<script setup lang="ts">
import { useRouter } from 'vue-router';

import type { NavBarProps } from './types';

const router = useRouter();
const props = defineProps<NavBarProps>();

const onClickLeft = () => {
  if (props.clickLeft) {
    props.clickLeft();
  } else {
    router.back();
  }
};

const onClickRight = () => {
  if (props.clickRight) {
    props.clickRight();
  }
};
</script>

<template>
  <div
    class="z-10 flex h-5 w-full items-center border-b border-b-zinc-200 bg-white dark:border-b-zinc-700 dark:bg-zinc-800"
    :class="{ 'sticky top-0 left-0': props.sticky, relative: !props.sticky }"
  >
    <div
      class="absolute left-0 flex h-full w-5 items-center justify-center"
      @click="onClickLeft"
    >
      <slot name="left">
        <MSvgIcon
          name="back"
          class="h-2 w-2"
          fillClass="fill-zinc-900 dark:fill-zinc-200"
        />
      </slot>
    </div>
    <div
      class="text-bold m-auto flex h-full items-center justify-center text-base text-zinc-900 dark:text-zinc-200"
    >
      <slot />
    </div>
    <div
      class="absolute right-0 flex h-full w-5 items-center justify-center"
      @click="onClickRight"
    >
      <slot name="right" />
    </div>
  </div>
</template>
